<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/mui.css">
    <link rel="stylesheet" href="./css/demo-common.css">
    <link rel="stylesheet" href="./css/atom-one-light.css">
    <script src="./js/jquery-2.2.3.min.js"></script>
    <script src="./js/highlight.pack.js"></script>
    <script src="../js/label.js"></script>
    <style>
    	.square{
    		position:relative; 
    		display:inline-block; 
    		width:50px; 
    		height:50px; 
            margin-right: 10px;
    		background-color: #dfdfdf;
    		border-radius: 3px;
    	}
    </style>
  </head>
  <body>
    <h3>Label标签</h3>

    <h4>Label</h4>
    <section>
        <div class="example">
        	<p>你可以将标签文字和图标或图片放在一起。</p>
        	<p>添加<mark>.close</mark>图标，这样标签就可以删除。</p>
        	<br>
        	<div class="label"><i class="fa fa-envelope"></i>23</div>
        	<div class="label"><img src="./img/yuna.jpg" alt="">张三</div>
        	<div class="label">标签<i class="fa fa-close close"></i></div>
        </div>
        <pre><code>
	&lt;div class="label"&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;23&lt;/div&gt;
	&lt;div class="label"&gt;&lt;img src="./img/yuna.jpg" alt=""&gt;张三&lt;/div&gt;
	&lt;div class="label"&gt;标签&lt;i class="fa fa-close close"&gt;&lt;/i&gt;&lt;/div&gt;
        </code></pre>
        <div class="example" style="border-top:1px solid #ccc">
            <p>不同颜色的标签：</p>
            <br>
            <div class="label primary"><i class="fa fa-envelope"></i>23</div>
            <div class="label green"><img src="./img/yuna.jpg" alt="">张三</div>
            <div class="label red">标签<i class="fa fa-close close"></i></div>
            <div class="label teal">李四</div>
            <div class="label yellow">王二麻子</div>
        </div>
        <pre><code>
    &lt;div class="label primary"&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;23&lt;/div&gt;
    &lt;div class="label green"&gt;&lt;img src="./img/yuna.jpg" alt=""&gt;张三&lt;/div&gt;
    &lt;div class="label red"&gt;标签&lt;i class="fa fa-close close"&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;div class="label teal"&gt;李四&lt;/div&gt;
    &lt;div class="label yellow"&gt;王二麻子&lt;/div&gt;  
        </code></pre>
    </section>

    <h4>徽标</h4>
    <section>
    	<div class="example">
    		<p>在另一个元素之上显示一个徽标。</p>
            <p>注意：元素的<mark>position</mark>属性必须为<mark>relative</mark>或<mark>absolute</mark>。</p>
    		<br>
    		<div>
    			<span class="square">
    				<span class="badge">8</span>
    			</span>
    			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<span class="square">
    				<span class="badge green">0</span>
    			</span>
    			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<span class="square">
    				<span class="badge red">20</span>
    			</span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="square">
                    <span class="badge teal">888</span>
                </span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="square">
                    <span class="badge yellow">3</span>
                </span>
    		</div>
    	</div>
        <pre><code>
    &lt;span class="square"&gt;
        &lt;span class="badge"&gt;8&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class="square"&gt;
        &lt;span class="badge green"&gt;0&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class="square"&gt;
        &lt;span class="badge red"&gt;20&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class="square"&gt;
        &lt;span class="badge teal"&gt;888&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class="square"&gt;
        &lt;span class="badge yellow"&gt;3&lt;/span&gt;
    &lt;/span&gt;
        </code></pre>
    </section>

    <script>
    $(document).ready(function() {
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
    </script>
  </body>
</html>